<script setup lang="ts">
import { ref, inject, watch, reactive,defineProps } from "vue";
import router from "@/router";
import "element-plus/es/components/message-box/style/css";
import {} from "@/network/api";

const FooterList = ref([]) as any;
const FooterFollowUS = ref() as any;
const footerLogo = ref() as any;
const myFn = inject<any>("open");

// FooterFollowUS.value = JSON.parse(footerData.follow_us);
// footerLogo.value = footerData.footer_logo;
// window.localStorage.setItem("webInfo", JSON.stringify(footerData));

FooterList.value = [
  {
    id: 1,
    tag: "产品方案",
    alias: "Solutions",
    menu_list: [
      { menu_id: 10, name: "易招商" },
      { menu_id: 11, name: "资管云" },
      { menu_id: 12, name: "产服云" },
      { menu_id: 13, name: "分析云" },
    ],
  },
  {
    id: 2,
    tag: "关于我们",
    alias: "About",
    menu_list: [
      { menu_id: 14, name: "合作伙伴" },
      { menu_id: 15, name: "我们的价值观" },
      { menu_id: 16, name: "服务保障" },
    ],
  },
  {
    id: 2,
    tag: "生态平台",
    alias: "Ecology",
    menu_list: [
      { menu_id: 17, name: "热门生态" },
      { menu_id: 18, name: "生态体验" },
    ],
  },
];

const toFooterUrl = (item: any, item2: any, index: any) => {
  switch (item.id) {
    case 1:
      router.push({
        path: "/Solutions",
        query: {
          id: item2.menu_id,
          name: item2.name,
          t: Date.now(),
        },
      });
      break;
    default:
      router.push({
        path: `${item.alias}`,
      });
  }
};

const props = defineProps({
  language: {
    type: String,
    default: "chinese_simplified",
  },
});

const toFollow = (ind: any) => {
  window.open(FooterFollowUS.value[ind].val);
};

const toBeian = () => {
  window.open("https://beian.miit.gov.cn/#/Integrated/index");
};

const toContact = () => {
  myFn();
};

const callPhone = (phone: any) => {
  window.location.href = "tel://" + Number(phone);
};

const Sitemap = ( ) => {
  router.push({
        path: `/Sitemap`,
      });
}
</script>

<template>
  <div class="footer">
    <div class="footer-content">
      <div class="footer-navbar">
        <el-row justify="space-between">
          <el-col :span="15" :lg="15" :sm="15" :xs="0">
            <div class="footer-navbar-info">
              <!-- <div class="footer-navbar-logo">
                <div class="logoBox">
                  <img
                    v-if="language == 'english'"
                    src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/logoEnglish.png"
                    alt=""
                  />
                  <img
                    v-if="language == 'chinese_simplified'"
                    src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/logoChinese.png"
                    alt=""
                  />
                </div>
              </div>
              <div class="flex justify_between" style="margin: 0 0 20px 0">
                <div class="">快捷导航：</div>
                <div>
                  <router-link to="/Solutions"> 线上展厅 </router-link>
                </div>
                <div>
                  <router-link to="/About"> 采购对接 </router-link>
                </div>
                <div>
                  <router-link to="/News"> 新闻资讯 </router-link>
                </div>
                <div>
                  <router-link to="/Ecology"> 产业集群 </router-link>
                </div>
                <div>
                  <router-link to="/about"> 关于我们 </router-link>
                </div>
              </div> -->

              <div class="pointer">
                <div class="">联系我们</div>
                <div class="" style="margin: 12px 0 0 0">
                  电话：<span @click="callPhone('07523279220')"
                    >0752-3279220（总机）、</span
                  >
                  <span @click="callPhone('18682174299')">+86-18682174299（手机）</span>
                </div>
                <div class="" style="margin: 12px 0 0 0">
                  联系人：陈小姐/susan
                </div>
                <div class="" style="margin: 12px 0 0 0">
                  邮箱：huizhoueii@163.com 
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8" :lg="8" :sm="8" :xs="0">
            <el-row style="height: 100%">
              <el-col>
                <div
                  style="height: 100%"
                  class="flex justify_end text_center align_center"
                >
                  <div class="footer-qrCode">
                    <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/off.png" alt="" />
                    <div class="contentText">微信公众号</div>
                  </div>
                  <div class="footer-qrCode">
                    <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/WX.png" alt="" />
                    <div class="contentText">企业微信号</div>
                  </div>
                  <div class="footer-qrCode">
                    <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/QQ.png" alt="" />
                    <div class="contentText">QQ联系号</div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <div class="footer-navbar-left"></div>
          </el-col>
        </el-row>
        <!-- 手机端footer -->
        <el-row justify="center">
          <el-col :span="0" :xs="24">
            <div class="footer-move-logo">
              <img
                v-if="language == 'english'"
                src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/logoEnglish.png"
                alt=""
              />
              <img
                v-if="language == 'chinese_simplified'"
                src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/logoChinese.png"
                alt=""
              />
            </div>

            <!-- <div class="footer-move-qrCode">
              <div class="flex justify_between text_center">
                <div class="footer-qrCode">
                  <img
                    src="https://park-platform.oss-cn-beijing.aliyuncs.com/2023101882533.png"
                    alt=""
                  />
                  <div class="contentText">微信公众号</div>height: initial;
                </div>
                <div class="footer-qrCode">
                  <img
                    src="https://park-platform.oss-cn-beijing.aliyuncs.com/2023101882533.png"
                    alt=""
                  />
                  <div class="contentText">小程序</div>
                </div>
              </div>
            </div> -->
            <!-- <div class="footer-move-link">
              <div class="">快捷导航：</div>
              <div class="flex flex_wrap justify_between xs_url">
                <div>
                  <router-link to="/Solutions"> 线上展厅 </router-link>
                </div>
                <div>
                  <router-link to="/About"> 采购对接 </router-link>
                </div>
                <div>
                  <router-link to="/News"> 新闻资讯 </router-link>
                </div>
                <div>
                  <router-link to="/Ecology"> 产业集群 </router-link>
                </div>
                <div>
                  <router-link to="/about"> 关于我们 </router-link>
                </div>
              </div>
            </div> -->

            <div class="pointer footer-footer" style="font-size: 16px; line-height: 28px">
              <div class="fweightBold">联系我们</div>
              <div class="">
                电话：<span @click="callPhone('07523279220')"
                  >0752-3279220（总机）、</span
                >
                <span @click="callPhone('18682174299')">+86-18682174299（手机）</span>
              </div>
              <div class="">联系人：陈小姐/susan</div>
              <div class="">邮箱：huizhoueii@163.com </div>
            </div>

            <div
              style="font-size: 16px"
              class="flex justify_around text_center align_center"
            >
              <div class="footer-qrCode" style="margin-left: 0px; height: initial">
                <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/off.png" alt="" />
                <div class="">微信公众号</div>
              </div>
              <div class="footer-qrCode" style="margin-left: 0px; height: initial">
                <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/WX.png" alt="" />
                <div class="">企业微信号</div>
              </div>
              <div class="footer-qrCode" style="margin-left: 0px; height: initial">
                <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/QQ.png" alt="" />
                <div class="">QQ联系号</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="footer-footer" style="margin-top: 20px">
        <el-row style='height: 100%'>
          <el-col :span="24" :xs="0">
            <div class="flex align_center flex_wrap" style="height: 100%">
              <div class="webUrl fweightBold">
                <a href="" target="_blank">友情链接</a>
              </div>
              <div class="webUrl">
                <a href="http://www.customs.gov.cn/" target="_blank">中国海关</a>
              </div>
              <div class="webUrl">
                <a href="http://shenzhen.customs.gov.cn/" target="_blank">深圳海关</a>
              </div>
              <div class="webUrl">
                <a href="https://guangdong.chinatax.gov.cn/gdsw/hzsw/hzsw_index.shtml" target="_blank"
                  >国家税务总局惠州市税务局</a
                >
              </div>
              <div class="webUrl">
                <a
                  href="http://www.hzzk.gov.cn/"
                  target="_blank"
                  >仲恺高新技术产业开发区管委会</a
                >
              </div>
            </div>
          </el-col>
          <el-col :span="0" :xs="24">
            <div class="" style="height: 100%">
              <div class="webUrl fweightBold">
                <a href="" target="_blank">友情链接</a>
              </div>
              <div class="webUrl">
                <a href="http://www.customs.gov.cn/" target="_blank">中国海关</a>
              </div>
              <div class="webUrl">
                <a href="http://shenzhen.customs.gov.cn/" target="_blank">深圳海关</a>
              </div>
              <div class="webUrl">
                <a href="http://www.hzzk.gov.cn/" target="_blank"
                  >国家税务总局惠州市税务局</a
                >
              </div>
              <div class="webUrl">
                <a
                  href="https://guangdong.chinatax.gov.cn/gdsw/hzsw/hzsw_index.shtml"
                  target="_blank"
                  >仲恺高新技术产业开发区管委会</a
                >
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="footer-footer">
        <el-row>
          <el-col :lg="24" :sm="24" :xs="24">
            <div class="footer-footer-left align_center flex justify_between">
              <div class="align_center flex">
                <img src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/public.png" alt="" />
                &nbsp;&nbsp;
                <span class="pointer beian" @click="toBeian">
                  hzeii.com   惠州市电子信息产业协会   粤公网安备 粤ICP备20036006号-1
                </span>
              </div>
              <div style="cursor: pointer;" @click='Sitemap'>网站地图</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.webUrl {
  margin-right: 5%;
  //一行省略
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 28px;
}

.logoBox {
  display: flex;
  height: 100%;
  align-items: center;
  .contentText {
    width: 250px;
    font-weight: bold;
  }
}
.footer {
  position: relative;
  bottom: 0%;
  width: 100%;
  background-color: #f3f3f3;
  height: auto;
  font-size: 18px;
  // line-height: 60px;

  .footer-content {
    margin: 0 auto;

    .footer-header {
      border-bottom: 1px solid #172e59;

      .footer-header-follow-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 0 30px 0;

        .iconfont {
          font-size: 38px;
          color: #172e59;
        }

        img {
          width: 40px;
        }
      }
    }

    .footer-navbar {
      padding: 36px 0 48px 0;
      // display: flex;

      .footer-navbar-info {
        margin-right: 20px;

        .footer-navbar-logo {
          margin-bottom: 40px;
        }
      }

      .footer-navbar-item-title {
        color: #172e59;
        margin-bottom: 20px;
      }

      .footer-navbar-item-ctn {
        color: #172e59;
        // font-size: 13px;
        height: 30px;
        line-height: 30px;
        opacity: 0.6;
      }

      .footer-navbar-item-ctn:hover {
        color: #172e59;
        opacity: 1;
      }

      .footer-qrCode {
        width: 90px;
        margin-left: 40px;
        .contentText {
          font-size: 18px;
        }
        img {
          width: 100%;
          height: 100%;
          margin-bottom: 7px;
          object-fit: contain;
        }
      }
    }

    .footer-footer {
      // width: 100%;
      height: 60px;
      line-height: 58px;
      color: #172e59;
      /* display: flex;
            justify-content: space-between; */
      border-top: 1px solid #172e59;
      // margin-top: 20px;

      .footer-footer-left {
        font-size: 13px;
      }

      .footer-footer-right {
        display: flex;
        justify-content: flex-end;

        div {
          margin-left: 10px;
          font-size: 13px;
        }
      }

      .footer-footer-right {
        div:hover {
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
}
.pointer {
  white-space: normal;
}
.icon {
  width: 20px;
  height: 20px;
  color: #172e59;
}

:deep(.el-input__wrapper) {
  border-radius: 20px;
}

:deep(.el-checkbox.el-checkbox--large .el-checkbox__inner) {
  border-radius: 50%;
}

#footerHeader {
  height: 100%;

  .footer-header-logo {
    height: 100%;
    display: inline-block;
    overflow: hidden;
    // position: relative;
    width: 140px;
    height: 100%;

    img {
      /* position: absolute;
      transform: translateX(-140px);
      filter: drop-shadow(#fff 140px 0); */
      // padding: 12px 10px;
      height: 100%;
      width: 100%;
      object-fit: contain;
    }
  }
}

.beian:hover {
  // color: #fff;
}

@media screen and (max-width: 450px) {
  #footerHeader {
    height: 100%;

    .footer-header-logo {
      height: 100%;
      display: inline-block;
      overflow: hidden;
      // position: relative;
      width: 140px;
      height: 100%;

      img {
        /* position: absolute;
      transform: translateX(-140px);
      filter: drop-shadow(#fff 140px 0); */
        // padding: 15px 0;
        height: 100%;
        width: 100%;
      }
    }
  }

  :deep(.el-message-box__title) {
    font-size: 16px;
  }

  .footer-content {
    width: 100%;
    margin: 0 10px;

    .footer-navbar {
      padding: 0 !important;

      .footer-navbar-left {
        padding-left: 10px;
      }
    }

    .footer-footer-right {
      flex-wrap: wrap;
      display: flex;
      margin: 0 0 20px 20px;
      justify-content: space-between;

      div {
        margin-right: 20px;
      }
    }
  }

  .footer-header {
    margin: 0 20px;
    border-bottom: 0 !important;
    // height: 70px;
  }

  .footer-footer {
    margin: 0 20px;
    padding: 10px 0;
    height: auto !important;

    .footer-footer-left {
      line-height: 1.5;
    }

    .footer-footer-right {
      flex-wrap: wrap;
    }
  }

  .Checkbox-One {
    display: none;
  }

  .Checkbox-Two {
    display: none;
  }

  .footer-move-logo {
    display: flex;
    padding: 30px 0;
    height: 100px;

    img {
      width: 60%;
      margin: 0 auto;
      object-fit: contain;
    }
  }

  .footer-move-qrCode {
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: center;

    .footer-qrCode {
      width: 100px !important;
      height: 100px !important;
    }
  }

  .footer-move-link {
    margin: 20px 20px;
    justify-content: space-between;
    color: #172e59;
  }

  .footer-footer-left {
    text-align: center;
  }
}

.el-row.is-align-middle {
  height: 100% !important;
}

.xs_url {
  div {
    margin: 10px 0;
  }
}

@media screen and (min-width: 768px) {
  .footer-content {
    width: 100%;
  }
  .xs {
    display: none;
  }
}

@media screen and (min-width: 992px) {
  .footer-content {
    width: 1000px;
  }

  .footer-header-follow {
    width: 30%;
  }
}

@media screen and (min-width: 1200px) {
  .footer-content {
    width: 1200px;
  }
}

@media screen and (min-width: 1440px) {
  .footer-content {
    width: 1440px;
  }
}
</style>
